<template>
  <div class="common-layout">
    <!-- style="height: 100vh" 表示页面可视区域为100% -->
    <el-container style="height: 100vh">

      <!-- 头部 -->
      <el-header class="header">Header</el-header>

      <!-- 主体 -->
      <el-container  class="content">
        <!-- 左侧导航栏 -->
        <el-aside class="left_aside" width="200px">
          <!--Aside-->
          <Dashboard_Menu></Dashboard_Menu>
        </el-aside>

        <!-- 右侧内容区 -->
        <el-main class="main">
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import Dashboard_Menu from '@/views/Menu.vue'

export default {
    name: 'DashboardPage',
  components: {
    Dashboard_Menu
  }
}

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.common-layout {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.header {
  background-color: paleturquoise;
  height: 50px;
  line-height: 50px;
}

.content {
  height: calc(100% - 50px);
}

.left_aside {
  background-color: antiquewhite;
}

.main {
  background-color: white;
}

</style>